<template>
 <header>
        <div class="header-container">
            <img src="https://course.myhope365.com/img/logo-text-green.2137bfaa.png" alt="">
            <div class="header-nav">
                <ul>
                    <li><router-link to="/">首页</router-link></li>
                    <li>
                        <a href="#" class="dropdown-trigger">课程分类
                            <i style="width: 10px;height: 10px;font-size: 12px">
                                <svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg>
                            </i>
                        </a>
                        <ul role="menu" tabindex="0" class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root ant-dropdown-menu-light ant-dropdown-content">
                                <li 
                                    v-for="course in allCourses" 
                                    :key="course.courseId"
                                    role="menuitem" 
                                    class="ant-dropdown-menu-item"
                                    @click="goToSearch(course.courseId)"
                                >
                                    <a href="#" style="color: rgba(0, 0, 0, .65);">{{ course.courseTitle }}</a>
                                </li>
                            </ul>
                    </li>
                    <li><a href="#">教学管理云平台</a></li>
                </ul>
            </div>
            <div class="search">
                <input ref="searchInput" placeholder="搜索课程~" type="text" style="color: #9f9f9f; outline: none;">
                <div class="bigButton">
                    <button @click="handleSearch">
                        <img src="" alt="">
                    </button>
                </div>
            </div>
            <div class="login-container">
                <div class="login-box">
                    <div class="white-box">
                        <span class="ant-badge">
                                <img 
                                    src="" 
                                    alt="" 
                                    @click="goToCart"
                                >
                                <sup v-if="!$store.state.login && cartIds.length > 0" style="color: red; position: absolute; top: 5px; right: -5px;font-size: 16px;font-weight: bold;">{{ cartIds.length }}</sup>
                            </span>
                    </div>
            
                    <div class="user-avatar">
                        <LoginView></LoginView>
                    </div>
                </div>
            </div>
        </div>
    </header>
  </template>
  
  <script>
  import LoginView from './LoginView.vue'
  import { mapState } from 'vuex'

  export default {
    name: 'DetailHead',
    data() {
        return {
            allCourses: []
        }
    },
    components: {
        LoginView,
    },  
    props: {
      msg: String
    },
    computed: {
      ...mapState(['cartIds']),
    },
    methods: {
      handleSearch() {
        const searchTerm = this.$refs.searchInput.value;
        this.$emit('search', searchTerm); 
      },
      goToSearch(courseId = '') {
            this.$router.push({ 
                name: 'SearchView',
                query: { subjectId: courseId }
            });
        },
      goToCart() {
        if (this.$store.state.login) {
          alert('请先登录');
          return;
        }
        this.$router.push({ name: 'CartView' });
      }
    },
    async created() {
        // 假设从和 MainSearch 同样的接口获取课程数据
        const { getList } = await import('@/api/request');
        Promise.all([
            getList('free'),
            getList('boutique'),
            getList('discount')
        ])
        .then(([freeRes, boutiqueRes, discountRes]) => {
            const boutiqueCourses = (boutiqueRes.rows || []).map(course => ({
                ...course,
                isBoutique: 1
            }));
            let allCourses = [
                ...(freeRes.rows || []),
                ...boutiqueCourses,
                ...(discountRes.rows || [])
            ];

            const courseIdSet = new Set();
            allCourses = allCourses.filter(course => {
                if (courseIdSet.has(course.courseId)) {
                    return false;
                }
                courseIdSet.add(course.courseId);
                return true;
            });

            this.allCourses = allCourses;
        });
    }
}
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="scss">
  header {
    height: 80px;
    background-color: white; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
}
header > .header-container {
    width: 1160px;
    height: 80px;
    margin: 0 auto;
    display: flex;
}
header > .header-container > img {
    width: 132px;
    height: 40px;
    margin-top: 20px;
    float: left;
}
header > .header-container > .header-nav {
    width: 300px;
    height: 30px;
    margin-left: 40px;
    margin-right: 30px;
    margin-top: 30px;
}
header > .header-container >.header-nav > ul > li {
    float: left;
    margin: 0 20px 0 0;
    font-size: 16px;
}
header >.header-container >.header-nav > ul > li > a {
    color: #000;
    font-weight: 600;
}
.search {
    width: 300px;
    height: 38px;
    margin-left: 188px;
    margin-top: 20px;
    display: flex;
}
.search > input {
    width: 229px;
    height: 35px;
    float: left;
    margin-bottom: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border: 1px solid #d9d9d9;
    font-size: 16px;
    color: rgba(0, 0, 0, .65);
    padding: 6px 11px;
}
.search > .bigButton {
    width: 52px;
    height: 38px;
    border-color: #d9d9d9;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.search >.bigButton > button {
    width: 52px;
    height: 36px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border: 1px solid yellow;
    border-color: #d9d9d9;
    background-color: #15962d;
    cursor: pointer;
}
.login-container {
    width: 170px;
    height: 80px;
}
.login-container > .login-box {
    width: 170px;
    height: 36px;
    margin-top: 20px;
    display: flex;
}
.login-container >.login-box > .white-box {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    float: left;
    margin: 0 20px;
    cursor: pointer;
}
.login-container >.login-box >.white-box > .ant-badge {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 14px;
    position: relative;
    display: inline-block;
    color: unset;
    line-height: 1;
}
.login-container >.login-box >.white-box >.ant-badge > img {
    margin-top: 8px;
    margin-left: 8px;
}
.login-container > .login-box > .user-avatar {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
}
.login-container >.login-box >.user-avatar >.open-minded {
    position: absolute;
    font-size: 10px;
    top: -50px;
    width: 155px;
    height: 41px;
    text-align: center;
    line-height: 30px;
    font-weight: 500;
    background: url();
    background-size: 100%;
    color: #fff;
}
.login-container >.login-box >.user-avatar >.login-or-register {
    width: 94px;
    height: 30px;
    background: #fff;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
    border-radius: 15px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
}
.ant-dropdown-menu {
    position: absolute;
    margin: 0;
    padding: 4px 0;
    text-align: left;
    list-style-type: none;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 2px;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    display: none;
    z-index: 1000;
    left: 0;
    top: 100%;
}
.ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title {
    clear: both;
    margin: 0;
    padding: 5px 12px;
    color: rgba(0, 0, 0, .65);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
    cursor: pointer;
    transition: all .3s;
}
.ant-dropdown-menu-item:hover {
    background-color: #f5f5f5;
}
.dropdown-trigger:hover + .ant-dropdown-menu,
.ant-dropdown-menu:hover {
    display: block;
}
.header-nav ul li {
    position: relative;
}
</style>